<template>
  <!-- App -->
  <f7-app :params="f7params">

    <!-- Main View -->
    <f7-view id="main-view" url="/" main 
    :pushState="f7view.pushState"
    :pushStateSeparator="f7view.pushStateSeparator"
    :iosSwipeBack="f7view.iosSwipeBack"
    :animate="f7view.animate"
    :preloadPreviousPage="f7view.preloadPreviousPage"

    ></f7-view>

  </f7-app>
</template>

<style lang="less" scoped>

</style>




<script>
// Import Routes
import routes from './routes.js';
import pageAnimation from "./components/framework7/page-animation.js";
import popupAnimation from "./components/framework7/popup-animation.js";

var $f7; // Framework7 Object
var $; // Scoped Page DOM7 selector
var $$; // Global DOM7 selector

export default {
  data() {
    return {
      // Framework7 parameters here
      f7params: {
        id: 'io.framework7.h5', // App bundle ID
        name: 'Framework7', // App name
        theme: 'ios', // Automatic theme detection
        // App routes
        routes: routes,
        data : function () {
          return {
            username: 'vladimir',
            firstName: 'Vladimir',
            lastName: 'Kharlampidi'
          };
        },
      },

      f7view: {
        pushState: true,
        pushStateSeparator: '#!',
        iosSwipeBack: false,
        animate: true,
        preloadPreviousPage: false,

      }
    }
  },

  mounted() {
    var context = this;

    this.$f7ready((f7) => {
      $f7 = f7;
      $ = function(selector) { return f7.$(selector, context.$el); };
      $$ = f7.$;

      $f7.on("pageInit", function(page) {

        pageAnimation(page, $f7, $, $$);

      });

      $f7.on("popupOpen", function(popup) {

        popupAnimation(popup, $f7, $, $$);


      });

      


    });
  },

  
}
</script>
